<script>
import { MenuItem } from "./MenuItem.js"
export default {
  name: "MenuBar",
  props: {
    menuList: {
      type: Array,
      default() {return []}
    },
    activeMenu: {
      type: String,
      default: ""
    }
  },
  methods: {
    wrapRouterLink(item) {
      const route = {
        params: {
          jumpFlag: true
        }
      };

      if (item.name) {
        route.name = item.name;
      } else if (item.routerName) {
        route.path = this.wrapRouterPath(item.routerName)
      } else {
        route.path = '/404'
      }
    },
    wrapRouterPath(path) {
      if (!path) return "";
      if (path.charAt(0) !== "/") return `/${path}`;
      return path;
    },
  },
  components: {
    MenuItem
  }
}
</script>

<template>
  <a-menu theme="dark" mode="inline" :selectedKeys="[$route.path]" :default-selected-keys="[$route.path]">
    <template  v-for="item in menuList" >
      <MenuItem :menu-item="item" :key="item.path"></MenuItem>
    </template>
  </a-menu>
</template>

<style scoped lang="less">

</style>